{include file="header/index" /}
<!--//laypage翻页需要 start-->
<script type="text/javascript" src="__JS__/layer/layer.js"></script>
<script type="text/javascript" src="__JS__/laypage/laypage.js"></script>
<script type="text/javascript" src="__JS__/laytpl/laytpl.js"></script>
<script type="text/javascript" src="__JS__/info.js"></script>
<link rel="stylesheet" href="__CSS__/laypage.css" />
<!--//laypage翻页需要 end-->

<meta charset="UTF-8">
<style>
	.form-control {
		height: 33px;
	}
</style>

<body>
	<div class="container privilegeUserList pb40">
		<div class="addUser">
			<form class="form-inline mt15 mb15" action="{:url('Parts/index')}" method="post">
				<div class="btn btn-default input-Btn mr20" data-toggle="modal" data-target="#add">添加配件</div>
				<div class="btn btn-default input-Btn mr20" data-toggle="modal" data-target="#type">添加分类</div>
				<div class="btn btn-default input-Btn mr20" data-toggle="modal1" data-target="#type1" onclick="partsinfo()">配件分类管理</div>
				<div class="form-group mr20">
					<input type="text" name="key" id="key" class="form-control input-max" placeholder="输入需要查询的配件名" value="{$vals}">
				</div>
				<button class="btn btn-primary input-Btn">搜索</button>
			</form>
		</div>

		<div class="table-responsive">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>配件名称</th>
						<th>配件分类</th>
						<th>配件金额</th>
						<th>操　　作</th>
					</tr>
				</thead>
				<script id="list-template" type="text/html">
					<tr>
						{{# for(var i=0;i
						<d.length;i++){ }} <td>{{d[i].parts_name}}</td>
							<td>{{d[i].info}}</td>
							<td>{{d[i].parts_money}}&nbsp;元</td>
							<td>
								<a class="btn btn-primary btn-xs" onclick="update({{d[i].parts_id}});"> <i class="fa fa-paste"></i> 编辑</a>&nbsp;&nbsp;
								<a href="javascript:;" onclick="roleDel(this,{{d[i].parts_id}})" class="btn btn-danger btn-xs"> <i class="fa fa-trash-o"></i> 删除</a>
							</td>
					</tr>{{# } }}
				</script>
				<tbody id="list-content"></tbody>
			</table>
		</div>
		<div class="clearfix" style="float:right;margin: 0 auto;">
			<span class="fl mr20 mt5">共{$count}条数据</span><span id="allpage" class="fl  mr20 mt5"></span><span class="fl" id="AjaxPage"></span>
		</div>
		<!-- 加载动画 -->
		<div class="spiner-example">
			<div class="sk-spinner sk-spinner-three-bounce">
				<div class="sk-bounce1"></div>
				<div class="sk-bounce2"></div>
				<div class="sk-bounce3"></div>
			</div>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">添加配件</h4>
				</div>
				<form class="form-horizontal" id="form_add" method="post" action="#" enctype="multipart/form-data">
					<div class="modal-body">
						<div class="form-group">
							<label class="col-sm-3 control-label">配件名称：</label>
							<div class="input-group col-sm-4">
								<input type="text" class="form-control" name="parts_name" placeholder="输入配件名称" required="required">
							</div>
						</div>
						<div class="hr-line-dashed"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label">配件金额：</label>
							<div class="input-group col-sm-4">
								<input type="text" class="form-control" name="parts_money" placeholder="输入配件金额" required="required">
							</div>
						</div>
						<div class="hr-line-dashed"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label">配件分类：</label>
							<select name="type_id" class="form-control col-sm-4 input-max mt5">
								<option value="">请选择配件分类</option>
								{volist name="tlist" id="vo"}
								<option value="{$vo.id}">{$vo.name}</option>
								{/volist}
							</select>
						</div>
						<div class="hr-line-dashed"></div>
						<div class="form-group">
							<label class="col-sm-3 control-label">状&nbsp;态：</label>
							<div class="col-sm-6">
								<div class="switchery-radio" style="padding-top: 8px;">
									<input type="checkbox" name="is_delete" value="0" class="js-switch" checked> 默认开启
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="add()">添加</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="modal fade" id="type" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">添加分类</h4>
				</div>
				<form class="form-horizontal" id="form_type" method="post" action="#" enctype="multipart/form-data">
					<div class="modal-body">
						<div class="form-group">
							<label class="col-sm-3 control-label">分类名称：</label>
							<div class="input-group col-sm-4">
								<input type="text" class="form-control" name="name" placeholder="请输入分类名称" required="required">
							</div>
						</div>
						<div class="hr-line-dashed"></div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-6">
								<textarea type="text" class="form-control" placeholder="请输入备注，非必填" name="note"></textarea>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="typAdd()">添加</button>
					</div>
				</form>
			</div>
		</div>
	</div>


</body>

<script>
	//laypage分页
	Ajaxpage();

	function Ajaxpage(curr) {
		var key = $('#key').val();
		$.getJSON('{:url("Parts/index")}', {
			page: curr || 1,
			key: key
		}, function(data) {
			$(".spiner-example").css('display', 'none'); //数据加载完关闭动画
			if(data == '') {
				$("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
			} else {
				var tpl = document.getElementById('list-template').innerHTML;
				laytpl(tpl).render(data, function(html) {
					document.getElementById('list-content').innerHTML = html;
				});
				laypage({
					cont: $('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
					pages: '{$allpage}', //总页数
					skip: true, //是否开启跳页
					skin: '#1AB5B7', //分页组件颜色
					curr: curr || 1,
					groups: 3, //连续显示分页数
					jump: function(obj, first) {
						if(!first) {
							Ajaxpage(obj.curr)
						}
						$('#allpage').html('，第' + obj.curr + '页，共' + '<i>' + obj.pages + '</i>' + '页');
						inputlength();
					}
				});
			}
		});
	}
	//删除
	function roleDel(obj, id) {
		layer.alert('确认删除此条记录吗?', {
			btn: ['确认', '取消'], //按钮

		}, function() {
			$.post("{:url('Parts/del')}", {
				id: id
			}, function(e) {
				if(e.code == '1') {
					layer.open({
						content: e.msg,
						time: 2000
					});
					$(obj).parents("tr").remove()
				} else {
					layer.open({
						content: e.msg,
						time: 2000
					});
				}
			}, 'json');
		});
	}
	//添加
	function add() {
		$.post("{:url('Parts/add')}", $('#form_add').serialize(), function(e) {
			if(e.code == '1') {
				$('#edit+naturalnumbers').hide();
				layer.open({
					content: e.msg,
					time: 2000
				});
				setTimeout(function() {
					location.reload();
				}, 800)
			} else {
				layer.open({
					content: e.msg,
					time: 2000
				});
			}
		}, 'json');
	}

	function typAdd() {
		$.post("{:url('Parts/typeAdd')}", $('#form_type').serialize(), function(e) {
			if(e.code == '1') {
				$('#edit+naturalnumbers').hide();
				layer.open({
					content: e.msg,
					time: 2000
				});
				setTimeout(function() {
					location.reload();
				}, 800)
			} else {
				layer.open({
					content: e.msg,
					time: 2000
				});
			}
		}, 'json');
	}
	//更新
	function update(id) {
		location.href = "{:url('update')}?id=" + id;
	}

	// 配件分类管理
	function partsinfo(){
        location.href = "{:url('/admin/partsinfo/index')}";
	}
</script>

</html>